<template>
  <basic-container>
    <div class="add-room-container">
      <h2 class="add-room-title text-center">新增计量点</h2>
      <el-form :model="form" label-width="100px" :rules="formRules">
        <!-- <el-form-item label="小区名称：" prop="roomName">
          <el-row :gutter="10">
            <el-col :span="18">
              <el-select
                v-if="!form.manual"
                v-model="form.roomName"
                :disabled="form.manual"
                filterable
                remote
                placeholder="请输入小区名称"
                :remote-method="getRegionName"
                :loading="loading"
              >
                <el-option
                  v-for="item in roomNameList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-input v-if="form.manual" v-model="form.roomName" placeholder="请输入小区名称"></el-input>
            </el-col>
            <el-col :span="6">
              <span class="manual-handle pointer" @click="manualHandle">
                手动添加
                <i :class="form.manual?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
              </span>
            </el-col>
          </el-row>
        </el-form-item>-->
        <el-form-item v-if="false" label="行政区域：" prop="address">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-select placeholder="请选择省" disabled v-model="value1">
                <el-option label="a" value="a"></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select placeholder="请选择市" disabled v-model="value2">
                <el-option label="a" value="a"></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select placeholder="请选择区" disabled v-model="value3">
                <el-option label="a" value="a"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 区域位置： -->
        <el-form-item v-if="estateShow" label="区域位置：" prop="address">
          <el-row :gutter="10">
            <el-col :span="20">
              <el-cascader
                style="width: 80%"
                v-model="form.countyId"
                disabled
                :options="communityTreeData"
                :props="props"
              ></el-cascader>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 计量点类型： -->
        <el-form-item label="计量点类型：" prop="status">
          <el-col :span="24">
            <el-radio-group @change="getRoomType" v-model="form.roomType">
              <el-radio :label="1">普通住宅</el-radio>
              <el-radio :label="2">公寓</el-radio>
              <el-radio :label="3">工/商业区</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <!-- 房号： -->
        <el-form-item label="房号：" prop="number">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-input class="width-auto" v-model="form.roomFloor"></el-input
              >楼
            </el-col>
            <el-col :span="6">
              <el-input class="width-auto" v-model="form.roomNo"></el-input>号
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 详细地址： -->
        <el-form-item label="详细地址：" prop="address">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-input
                v-model="form.roomAddress"
                placeholder="请输入街道信息"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 房间信息： -->
        <el-form-item v-if="isShow" label="房间信息：" prop="number">
          <el-row :gutter="10">
            <el-col :span="6">
              <!-- 房间名称 : -->
              <el-input
                placeholder="房间名称"
                class="width-auto-left"
                v-model="form.roomName"
              ></el-input>
            </el-col>
            <el-col :span="6">
              <!-- 业主姓名 : -->
              <el-input
                placeholder="业主姓名"
                class="width-auto-left"
                v-model="form.mobile"
              ></el-input>
            </el-col>
            <el-col :span="6">
              <!-- 业主电话 : -->
              <el-input
                placeholder="业主电话"
                class="width-auto-left"
                v-model="form.owner"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 出租方式： -->
        <el-form-item v-if="isShow" label="出租方式：" prop="type">
          <el-radio-group v-model="form.rentalMode">
            <el-radio label="1" value="1">整租</el-radio>
            <el-radio label="2" value="2">合租</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 房间规格： -->
        <el-form-item v-if="isShow" label="房间规格：" prop="status">
          <el-row :gutter="10">
            <el-col :span="4">
              <el-input class="width-auto" v-model="form.roomShi"></el-input>室
            </el-col>
            <el-col :span="4">
              <el-input class="width-auto" v-model="form.roomTing"></el-input>厅
            </el-col>
            <el-col :span="4">
              <el-input class="width-auto" v-model="form.roomChu"></el-input>厨
            </el-col>
            <el-col :span="4">
              <el-input class="width-auto" v-model="form.roomWei"></el-input>卫
            </el-col>
            <el-col :span="4">
              <el-input
                class="width-auto"
                v-model="form.roomAreas"
                placeholder="面积"
              ></el-input
              >㎡
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-select placeholder="朝向" v-model="form.orientation">
                <el-option label="东" value="1"></el-option>
                <el-option label="西" value="2"></el-option>
                <el-option label="南" value="3"></el-option>
                <el-option label="北" value="4"></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select placeholder="装修程度" v-model="form.renovation">
                <el-option label="简单装修" value="1"></el-option>
                <el-option label="精装修" value="2"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- end -->
        <el-form-item class="text-center">
          <el-button @click="last">返回</el-button>
          <el-button type="success" @click="submit">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </basic-container>
</template>

<script>
import { mapState } from "vuex";
import { getLazyTree } from "@/api/base/region";
import { getTreeList } from "@/api/meter/community";
import { saveRoom, getRegionName, getTreeLink, update } from "@/api/meter/room";
export default {
  name: "decentralized",
  data() {
    return {
      isShow: true,
      value1: "",
      value2: "",
      value3: "",
      loading: false,
      estateShow: true,
      form: {
        manual: true,
        roomName: "",
        province1: "",
        city1: "",
        rentalMode: "1", // 出租方式
        orientation: "", //朝向
        renovation: "", //装修程度
        roomType: 1, //房源类型
        roomShi: "", // 室
        roomTing: "", // 厅
        roomChu: "", //厨
        roomWei: "", //卫
        roomAreas: "", //面积
        owner: "", //业主姓名
        mobile: "", //业主电话
        roomFloor: "", // 楼
        roomNo: "", // 房间编号
        countyId: "", //三级
        roomAddress: "", // 详细地址
        leaseStatus: "", //出租方式
        estateId: "", // 最后传地区
      },
      provinceList1: [],
      cityList1: [],
      communityTreeData: [],
      countyList1: [],
      props: {
        expandTrigger: "hover",
        children: "child",
        label: "name",
        value: "id",
        checkStrictly: true,
      },
      formRules: {
        // lat: [{ required: true, message: "请输入经度" }],
        // lon: [{ required: true, message: "请输入维度" }],
        // type: [{ required: true, message: "请选择出租方式" }],
        // number: [{ required: true, message: "请输入房号" }],
        // status: [{ required: true, message: "请输入房间规格" }],
      },
    };
  },
  created() {
    getTreeLink(0, 1).then((res) => {
      this.provinceList1 = res.data.data;
    });
    getTreeList().then((res) => {
      this.communityTreeData = res.data.data;
    });
    if (this.$route.query.type == 2) {
      this.estateShow = false;
      this.fillData(this.$route.query.data);
      console.log("this.$route.query.type", this.$route.query.data);
    } else {
      this.estateShow = true;
      this.fillData(this.$route.query.data);
    }
  },
  computed: {
    ...mapState({
      roomStoreData: (state) => state.room.roomStoreData,
    }),
  },
  methods: {
    fillData(data) {
      console.log(data, "1111111");
      this.form.countyId = data.id;
      // this.changeProvince1(data.communityId);
      // this.form.province1 = data.communityId;
    },
    getRoomType(value) {
      if (value == 3) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
    getRegionName(val) {
      this.loading = true;
      if (val != "") {
        console.log("form.roomName");
        getRegionName(val).then((res) => {
          console.log("getRegionName", res.data.data);
          this.roomNameList = res.data.data;
          this.loading = false;
        });
      } else {
        this.roomNameList = [];
      }
    },
    last() {
      this.$router.go(-1);
    },
    // 一级
    changeProvince1(value) {
      this.form.city1 = "";
      this.form.countyId = "";
      this.cityList1 = [];
      this.countyList1 = [];
      const areaData = this.provinceList1.find((item) => item.id == value);
      if (areaData) {
        this.value1 = areaData.provinceName;
        this.value2 = areaData.cityName;
        this.value3 = areaData.districtName;
      }
      getTreeLink(value, 2).then((res) => {
        this.cityList1 = res.data.data;
      });
    },
    changeCity1(value) {
      this.form.countyId = "";
      this.countyList1 = [];
      getTreeLink(value, 3).then((res) => {
        this.countyList1 = res.data.data;
      });
    },

    manualHandle() {
      this.form.province = "";
      this.form.city = "";
      this.form.county = "";
      this.form.roomName = "";
      this.$set(this.form, "manual", !this.form.manual);
    },
    empty() {
      this.form = {
        manual: true,
        roomName: "",
        province1: "",
        city1: "",
        rentalMode: "1", // 出租方式
        orientation: "", //朝向
        renovation: "", //装修程度
        roomType: 1, //房源类型
        roomShi: "", // 室
        roomTing: "", // 厅
        roomChu: "", //厨
        roomWei: "", //卫
        roomAreas: "", //面积
        owner: "", //业主姓名
        mobile: "", //业主电话
        roomFloor: "", // 楼
        roomNo: "", // 房间编号
        countyId: "", //三级
        roomAddress: "", // 详细地址
        leaseStatus: "", //出租方式
        estateId: "", // 最后传地区
      };
      this.provinceList1 = [];
      this.cityList1 = [];
      this.countyList1 = [];
    },
    submit() {
      if (this.$route.query.type == 2) {
        const data = this.$route.query.data;
        this.form.estateId = data.chile[0]["estateId"];
      } else if (this.$route.query.type == 1) {
        if (this.form.countyId) {
          console.log("01", this.form.countyId);
          this.form.estateId = this.form.countyId;
        } else if (this.form.city1) {
          console.log("02", this.form.city1);
          this.form.estateId = this.form.city1;
        } else if (this.form.province1) {
          console.log("03", this.form.province1);
          this.form.estateId = this.form.province1;
        } else {
          this.$notify({
            title: "提示",
            message: "请选择区域位置",
            type: "warning",
          });
          return;
        }
      }
      // 新增分散式房源
      update(this.form).then((res) => {
        this.empty();
        console.log("update", res);
        this.$notify({
          title: "提示",
          message: res.data.msg,
          type: "success",
        });
        this.last();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.add-room-title {
  font-size: 18px;
}
.add-room-container {
  max-width: 800px;
  margin: 0 auto;
}
.width-auto {
  width: 70%;
  margin-right: 10px;
}
.width-auto-left {
  // width: 70%;
  // margin-left: 15px;
}
.manual-handle {
  color: #04a568;
}
</style>
<style lang="scss">
.add-room-container .el-row {
  margin: 0 !important;
}
</style>
